<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, abbr, article, aside, command, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time {
    margin: 0;
    padding: 0;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	outline: 0;
}
body{
	overflow-x:hidden; 
}
.clearfix{
	zoom: 1;
}
.clearfix:before{
	display: table;
    content: "";
    height: 0;
}
.clearfix:after {
    content: " ";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}
h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd, p {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 400;
}
img{
	/*display: block;*/
	vertical-align: top;
}
address, cite, dfn, em, var {
    font-style: normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*轮播图*/
.silder{
	position: relative;
}
.silder-wrapper{
	overflow: hidden;
	height: 760px;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
            transition: all 300ms ease;
}
.silder .silder-wrapper .swipe{
	height: 760px;
	background-position: center 0;
    background-repeat: no-repeat;
    box-sizing: content-box;
    float: left;
}
.silder-banner1{
	background: url("http://p19.qhimg.com/t01c8ef362b66ade3fa.jpg") no-repeat;/*不支持image-set*/
	background-color: rgb(0, 0, 0);
}
.silder-banner2{
	background: url("http://p19.qhimg.com/d/_open360/20140506/415.jpg") no-repeat;/*不支持image-set*/
	background-color: rgb(0, 0, 0);
}
.silder-banner3{
	background: url("http://image61.360doc.com/DownloadImg/2013/05/1719/32405513_4.jpg") no-repeat;/*不支持image-set*/
	background-color: rgb(0, 0, 0);
}
.silder-banner4{
	background: url("http://pic1.win4000.com/wallpaper/7/565faca1616b0.jpg") no-repeat;/*不支持image-set*/
	background-color: rgb(0, 0, 0);
}
.silder-banner5{
	background: url("http://image61.360doc.com/DownloadImg/2013/05/1518/32353731_20.jpg") no-repeat;/*不支持image-set*/
	background-color: rgb(0, 0, 0);
}
.silder-Clist{
	width: 500px;
    padding: 0 10px;
    height: 20px;
    position: absolute;
    z-index: 20;
    left: 50%;
    margin-left: -260px;
    bottom: 10px;
    text-align: center;
}
.swiper-pagination-switch{
	display: inline-block;
    zoom: 1;
    margin: 3px 12px;
    width: 10px;
    height: 10px;
    background: #fff;
    cursor: pointer;
    border-radius: 50%;
    /*border: 1px solid red;*/
}
.theme-white .swiper-pagination-switch{
    border-color: rgb(255, 255, 255);
    background: rgb(255, 255, 255);
}
.theme-gray .swiper-pagination-switch{
    border-color: rgb(255, 255, 255);
    background: rgb(51, 51, 51);
}    
.theme-white .pagination-active{
	background: #333 ;
	border: 1px solid;
    border-color: #fff;
	width: 12px ;
    height: 12px ;
    margin: 1px 10px ;
}
.theme-gray .pagination-active{
    background: #fff ;
    border: 1px solid;
    border-color: #333;
    width: 12px ;
    height: 12px ;
    margin: 1px 10px ;
}
/*导航条*/
.nav{
	position: absolute;
    z-index: 2;
    width: 100%;
    top: 0;
}
.nav-wrapper{
	width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}
.nav-wrapper:before{
	content: "";
    display: table;
    height: 0;
    clear: both;
    visibility: hidden;
}
.logo{
	display: inline;
    float: left;
    padding: 30px 0;
}
.logo-img{
    width: 115px;
    height: 20px;
    display: block;   
}
.theme-white .logo-img{
    background-image: url(http://www3.res.meizu.com/static/cn/index/images/logo-new_774b3e9.png);
}
.theme-gray .logo-img{
    background-image: url(http://www3.res.meizu.com/static/cn/index/images/logo-new-toggle_294da7f.png);
}
.theme-white .toggle .logo-img{
    background-image: url(http://www3.res.meizu.com/static/cn/index/images/logo-new-toggle_294da7f.png);
}
.theme-gray .toggle .logo-img{
    background-image: url(http://www3.res.meizu.com/static/cn/index/images/logo-new-toggle_294da7f.png);
}
.user{
	display: inline;
    float: right;
    padding: 32px 12px 0 30px;
    text-align: right;
    font-size: 12px;
    position: relative;
    z-index: 105;
}
.user:after{
	content: "";
    display: table;
    height: 0;
    clear: both;
    visibility: hidden;
}
.nav-link{
	display: inline;
    float: right;
    overflow: hidden;
    white-space: nowrap;
    white-space: nowrap;
}
.nav-link>li{
    display: inline;
    float: left;
}
.nav-link>li>a {
	display: block;
    padding: 31px 22px 30px;
    line-height: 21px;
    font-size: 14px;
    font-family: Helvetica,Tahoma,Arial,'Hiragino Sans GB',"Microsoft YaHei",SimSun,Heiti,sans-serif;
}
.theme-gray .nav-link>li>a{
    color: #333;
}
.theme-white .nav-link>li>a{
    color: #fff;
}
.theme-white .toggle .nav-link>li>a{
    color: #333;
}
.theme-gray .toggle .nav-link>li>a{
    color: #333;
}
.nav .nav-wrapper .nav-link>li>a:hover{
    color:#00cef8 !important;
}
.nav .meizu-header-sub {
    z-index: 100;
    display: block;
    position: absolute;
    left: 0;
    top: 65px;
    background-color: #fff;
    min-width: 100%;
    overflow: hidden;
    height: 0;
}
.nav .meizu-header-sub-wrap {
    width: 1280px;
    margin: 0 auto;
}
.nav #meizu-header-sub-mx ul {
    padding-left: 476px;
}
.nav .meizu-header-sub ul {
    overflow: hidden;
    padding: 5px 0 0 390px;
    margin: 0;
    list-style: none;
}
.nav ul, #meizu-header-container li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.header .toggle{
    background: #fff;
}
.meizu-header-sub li {
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
    filter: alpha(opacity=0);
    opacity: 0;
}
.meizu-header-sub .meizu-header-sub-pro6 {
    background-image: url(http://www3.res.meizu.com/static/cn/widget/header/images/pro6_5f39455.png);
}
.meizu-header-sub .meizu-header-sub-note3 {
    background-image: url(http://www3.res.meizu.com/static/cn/widget/header/images/m3_fa5c797.png);
}
.meizu-header-sub .meizu-header-sub-router {
    background-image: url(http://www3.res.meizu.com/static/cn/widget/header/images/router_1280efe.png);
}
.meizu-header-sub .meizu-header-sub-erji {
    background-image: url(http://www3.res.meizu.com/static/cn/widget/header/images/hd50_0ef1eab.png);
}
.meizu-header-sub a {
    cursor: pointer;
    font-size: 12px;
    width: 125px;
    height: 25px;
    color: #666;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: center 0;
    display: block;
    padding: 95px 11px 7px;
    cursor: pointer;
    position: relative;
    z-index: 99;
}
.meizu-header-sub a span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 127px;
    width: 147px;
    opacity: .01;
    filter: alpha(opacity=1);
    background-color: #fff;
    transition: all 300ms ease;
}
.meizu-header-sub-animation {
    -webkit-animation: meizu-header-sub-show .5s ;
    animation: meizu-header-sub-show .5s ;
}
.meizu-header-sub-show {
    display: block;
    border-bottom: 1px solid #e9e9e9;
    height: auto !important;
}

.meizu-header-sub-show li {
    opacity: 1\9\0;
    filter: alpha(opacity=100);
    -webkit-animation: meizu-header-sub-enter .8s forwards;
    animation: meizu-header-sub-enter .8s forwards
}

.meizu-header-sub-show li:nth-child(1) {
    -webkit-animation-delay: 0;
    animation-delay: 0
}

.meizu-header-sub-show li:nth-child(2) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.meizu-header-sub-show li:nth-child(3) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.meizu-header-sub-show li:nth-child(4) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.meizu-header-sub-show li:nth-child(5) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.meizu-header-sub-show li:nth-child(6) {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.meizu-header-sub-show li:nth-child(7) {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}
@-webkit-keyframes meizu-header-sub-show {
    from {
        height: 0
    }

    to {
        height: 127px
    }
}

@keyframes meizu-header-sub-show {
    from {
        height: 0
    }

    to {
        height: 127px
    }
}
@-webkit-keyframes meizu-header-sub-enter {
    from {
        -webkit-transform: translate(70px);
        transform: translate(70px);
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes meizu-header-sub-enter {
    from {
        -webkit-transform: translate(70px);
        transform: translate(70px);
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
        filter: alpha(opacity=100)
    }
}
	</style>
</head>
<body>
	<div class="header theme-white">
		<!--轮播图开始-->	
		<div class="silder">
			<div class="silder-wrapper">
				<div class="swipe silder-banner5"></div>
				<div class="swipe silder-banner1"></div>
				<div class="swipe silder-banner2"></div>
				<div class="swipe silder-banner3"></div>
				<div class="swipe silder-banner4"></div>
				<div class="swipe silder-banner5"></div>
				<div class="swipe silder-banner1"></div>
			</div>
		</div>
		<!--导航菜单开始-->		
		<div class="nav">
			<div class="nav-wrapper">
				<div class="logo"><a href="/index.html" class="logo-img"></a></div>
				<div class="user"></div>
				<ul  class="nav-link" id="meizu-header-link">
                    <li><a href="files/store.html">魅族商城</a></li>				
                    <li data-nav="mx"><a id="meizu"  href="">魅族手机</a></li>
	                <li data-nav="meilan"><a id="meilan" href="">魅蓝手机</a></li>
	                <li data-nav="router"><a id="router" href="">智能硬件</a></li>
	                <li data-nav="accessory"><a id="accessory"href="" >配件</a></li>				
                    <li><a href="">服务</a></li>
	                <li><a href="">专卖店</a></li>
	                <li><a href="">Flyme</a></li>
	                <li><a href="">社区</a></li>
				</ul>
			</div>
			<div data-link="mx" id="meizu-header-sub-mx" class="meizu-header-sub ">
				<div class="meizu-header-sub-wrap">
					<ul class="meizu-header-sub-ul-on">
						<li><a href="javascript:" class="meizu-header-sub-pro6">PRO 6 <span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-pro6">PRO 6 <span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-pro6">PRO 6 <span></span></a></li>
					</ul>
				</div>
			</div>
			<div data-link="meilan" id="meizu-header-sub-meilan" class="meizu-header-sub ">
				<div class="meizu-header-sub-wrap">
					<ul class="meizu-header-sub-ul-on">
						<li><a href="javascript:" class="meizu-header-sub-note3">note 3<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-note3">note 3<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-note3">note 3<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-note3">note 3<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-note3">note 3<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-note3">note 3<span></span></a></li>
					</ul>
				</div>
			</div>
			<div data-link="router" id="meizu-header-sub-router" class="meizu-header-sub ">
				<div class="meizu-header-sub-wrap">
					<ul class="meizu-header-sub-ul-on">
						<li><a href="javascript:" class="meizu-header-sub-router">路由器<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-router">路由器<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-router">路由器<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-router">路由器<span></span></a></li>
					</ul>
				</div>
			</div>
			<div data-link="accessory" id="meizu-header-sub-accessory" class="meizu-header-sub ">
				<div class="meizu-header-sub-wrap">
					<ul class="meizu-header-sub-ul-on">
						<li><a href="javascript:" class="meizu-header-sub-erji">头戴式耳机<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-erji">头戴式耳机<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-erji">头戴式耳机<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-erji">头戴式耳机<span></span></a></li>
						<li><a href="javascript:" class="meizu-header-sub-erji">头戴式耳机<span></span></a></li>
					</ul>
				</div>
			</div>									
		</div>		
	</div>
<script>
function globalFun(){};
globalFun.prototype.addClass = function(el, className) {
	if (!className) return;
	if (el.classList) {
		el.classList.add(className);
	} else {
		el.className += ' ' + className;
	}
};

globalFun.prototype.removeClass = function(el, className) {
	if (!className) return;
	if (el.classList) {
		el.classList.remove(className);
	} else {
		el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
	}
};

globalFun.prototype.hasClass = function(el, className) {
	if (!className) return false;
	if (el.classList) {
		return el.classList.contains(className);
	} else {
		return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
	}
};

globalFun.prototype.addEvent = function(object, type, callback) {
	if (object === null || typeof(object) === 'undefined') return;

	if (object.addEventListener) {
		object.addEventListener(type, callback, false);
	} else if (object.attachEvent) {
		object.attachEvent("on" + type, callback);
	} else {
		object["on" + type] = callback;
	}
};

globalFun.prototype.$ = function(ele) {
	if (ele === null || typeof(ele) === 'undefined' || typeof(ele) !== 'string') {return}
	else{return document.querySelectorAll(ele)}
};
var gb = new globalFun();

var sliderThemes = ['white','gray','white','gray','white'];
var iWidth = window.innerWidth;
var cWidth = document.body.clientWidth;
var getSwipe = document.querySelectorAll('.swipe ');
var getWrapper = document.querySelector('.silder-wrapper');
var totalWrapper = document.querySelector('.header');
var index = 1;
var cancelTarget;
getWrapper.style.transform = 'translateX('+ -cWidth +'px)';

function targetParent(elem, filter) {
  var matched = [],
    until,
    truncate = filter !== undefined;
  while ((elem = elem['parentNode']) && elem.nodeType !== 9) {
    if (elem.nodeType === 1) {
      if (truncate) {
        if(elem.nodeName.toLowerCase() ==filter){
        	return elem;
        }
      }    
    }
  }
}

for(var i=0; i<getSwipe.length; i++){
	getSwipe[i].style.width = cWidth  + 'px';
}
getWrapper.style.width = getSwipe.length * cWidth + 'px';

var renderPage = (function(){
		var pagination = document.createElement("div");
		var fgm = document.createDocumentFragment();
		pagination.className = "silder-Clist";
		for(var i=0; i<getSwipe.length-2; i++){
			var span = document.createElement('span');
			span.className = 'swiper-pagination-switch';
			span.setAttribute('data-item',i);
			fgm.appendChild(span);
		}
		pagination.appendChild(fgm);
		document.getElementsByClassName('silder')[0].appendChild(pagination);
		gb.addClass(document.querySelector('.swiper-pagination-switch'),'pagination-active');
	})()

var swiperScroll = function(){
	var page = document.querySelectorAll('.swiper-pagination-switch');
	getWrapper.style.transition = 'all 300ms ease';


	getWrapper.style.transform = 'translateX('+ -(index*cWidth) +'px)';

	if(index > getSwipe.length-2){	
		setTimeout(function(){
			getWrapper.style.transition = 'all 0ms';
			getWrapper.style.transform = 'translateX('+ -cWidth +'px)';
			
		},300)
		index = 1;		
	}

	gb.removeClass(document.querySelector('.pagination-active'),'pagination-active');
	gb.addClass(page[index-1],'pagination-active');
	//console.log(sliderThemes[index]+'|||||'+index);


	if(gb.hasClass(totalWrapper,'theme-white')){
		gb.removeClass(totalWrapper,'theme-white');
		gb.addClass(totalWrapper,'theme-'+sliderThemes[index-1]+'');
	}else if(gb.hasClass(totalWrapper,'theme-gray')){
		gb.removeClass(totalWrapper,'theme-gray');
		gb.addClass(totalWrapper,'theme-'+sliderThemes[index-1]+'');
	}
		
}
var init = setInterval(function(){
	index++;
	swiperScroll();
},3000);

window.addEventListener("resize", function(){
	clearInterval(init);
	var reg = /\-?[0-9]+/g;
	var val = cWidth;
	var translX = getWrapper.style.transform ? parseInt(getWrapper.style.transform.match(reg)[0]) : 0;
	console.log(translX);
	cWidth = document.body.clientWidth;
	var minusdist =  cWidth - val;
	console.log(minusdist);
	for(var i=0; i<getSwipe.length; i++){
		getSwipe[i].style.width = cWidth  + 'px';
	}
	getWrapper.style.width = getSwipe.length * cWidth + 'px';
	getWrapper.style.transition = 'all 0ms';
	getWrapper.style.transform = 'translateX('+ (translX - (minusdist*index)) +'px)';
	setTimeout(init = setInterval(function() {
		index++;
		swiperScroll();
	}, 3000), 300)
	}, false);

var nav = document.querySelector('.nav');
var overTimer,leaveTimer;
nav.addEventListener('mouseover',function(e){
	
	var e = e || window.event;
	var target = e.target || e.srcElement;
	var name = target.parentNode.nodeName.toLowerCase(); 
	//console.log(target);
	if(name == 'li' && target.parentNode.getAttribute('data-nav')){
		if(cancelTarget != undefined){
			Array.prototype.forEach.call(cancelTarget.querySelectorAll('span'),function(item,index){
				item.style.opacity = '';
			})
		}
	
		if(!document.querySelector('.meizu-header-sub-animation')){
			gb.addClass(document.querySelector('div[data-link='+ target.parentNode.getAttribute('data-nav') +']'),'meizu-header-sub-animation');
		}

		if(document.querySelector('.meizu-header-sub-show')){
			gb.removeClass(document.querySelector('.meizu-header-sub-show'),'meizu-header-sub-show');
		}
		gb.addClass(nav,'toggle');
		gb.addClass(document.querySelector('div[data-link='+ target.parentNode.getAttribute('data-nav') +']'),'meizu-header-sub-show');
				
	}else if (name == 'li' && !target.parentNode.getAttribute('data-nav')){
			if(document.querySelector('.meizu-header-sub-animation')){
				gb.removeClass(document.querySelector('.meizu-header-sub-animation'),'meizu-header-sub-animation');
			}

			if(document.querySelector('.meizu-header-sub-show')){					
				gb.removeClass(document.querySelector('.meizu-header-sub-show'),'meizu-header-sub-show');		
				gb.removeClass(nav,'toggle');
			}
		//gb.removeClass(document.querySelector('[data-link]'),'meizu-header-sub-show');
	}else if(target.nodeName.toLowerCase() == 'span'){	
		var parentUl = targetParent(target,'div');
		cancelTarget = parentUl;
		//console.log(cancelTarget);
		var siblings = [].filter.call(parentUl.querySelectorAll('span'), function(child) {
		  return child !== target;
		});
		siblings.forEach(function(item,index){item.style.opacity = '.6'});
		target.style.opacity = '.01';
		target.parentNode.style.color = '#111';
	}
},false)

nav.addEventListener('mouseleave',function(e){
	leaveTimer = new Date()*1;
	//console.log(overTimer +'|||' +leaveTimer +'----' + (leaveTimer -overTimer));
	var e = e || window.event;
	var target = e.target || e.srcElement;

	if(cancelTarget != undefined){
			Array.prototype.forEach.call(cancelTarget.querySelectorAll('span'),function(item,index){
				item.style.opacity = '';
			})
		}

	if(document.querySelector('.meizu-header-sub-show')){
		if(leaveTimer - overTimer < 300){
			console.log('300')
			setTimeout(function(){
				gb.removeClass(document.querySelector('.meizu-header-sub-show'),'meizu-header-sub-show');
				gb.removeClass(document.querySelector('.meizu-header-sub-animation'),'meizu-header-sub-animation');
				gb.removeClass(nav,'toggle');
			},300)
		}else{
			gb.removeClass(document.querySelector('.meizu-header-sub-show'),'meizu-header-sub-show');
			gb.removeClass(document.querySelector('.meizu-header-sub-animation'),'meizu-header-sub-animation');
			gb.removeClass(nav,'toggle');
		}	
		
	}
},false)

document.querySelector('.nav-link').addEventListener('mouseenter',function(e){
	var e = e || window.event;
	var target = e.target || e.srcElement;

	overTimer = new Date()*1;
},false)

document.querySelector('.silder-Clist').addEventListener('click',function(e){
	var e = e || window.event;
	var target = e.target || e.srcElement;

	if(target.nodeName.toLowerCase() == 'span'){
		clearInterval(init);
		index = parseInt(target.getAttribute('data-item')) + 1;
		swiperScroll();
		init = setInterval(function(){
			index++;
			swiperScroll();
		},3000);
	}
},false)
</script>    
</body>
</html>